<template>
  <div>
    <el-card style="margin: 20px">
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        :rules="rules"
        label-width="100px"
        class="demo-ruleForm"
        label-position="top"
      >
        <div class="item">
          <!-- 库区 -->
          <el-form-item style="width: 32%" label="库区" prop="location">
            <el-cascader
              v-model="ruleForm.location"
              :options="options"
              @change="handleChange"
            />
          </el-form-item>
          <!-- 库位编号 -->
          <el-form-item style="width: 32%" label="库位编号" prop="code">
            <el-input v-model="ruleForm.code" disabled />
          </el-form-item>
          <!-- 库位名称 -->
          <el-form-item style="width: 32%" label="库位名称" prop="name">
            <el-input v-model="ruleForm.name" />
          </el-form-item>
          <!-- 温度要求 -->
          <el-form-item
            style="width: 32%"
            label="温度类型"
            prop="temperatureType"
          >
            <el-select
              v-model="ruleForm.temperatureType"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option label="常温" value="CW" />
              <el-option label="冷藏" value="LC" />
              <el-option label="恒温" value="HW" />
            </el-select>
          </el-form-item>
        </div>
        <div class="item">
          <!-- 承重类型 -->
          <el-form-item style="width: 32%" label="承重类型" prop="bearingType">
            <el-select
              v-model="ruleForm.bearingType"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option label="重型" value="ZX" />
              <el-option label="轻型" value="QX" />
              <el-option label="中型" value="BX" />
            </el-select>
          </el-form-item>
          <!-- 用途属性 -->
          <el-form-item style="width: 32%" label="用途属性" prop="useType">
            <el-select
              v-model="ruleForm.useType"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option value="RKHCQ" label="入库缓存区" />
              <el-option value="CKHCQ" label="出库缓存区" />
              <el-option value="CCQ" label="存储区" />
              <el-option value="FJQ" label="分拣区" />
              <el-option value="ZJQ" label="质检区" />
            </el-select>
          </el-form-item>
          <!-- 停用状态 -->
          <el-form-item label="仓库状态" prop="status">
            <el-radio-group v-model="ruleForm.status">
              <el-radio label="启用" />
              <el-radio label="停用" />
            </el-radio-group>
          </el-form-item>
        </div>
        <div class="item">
          <!-- 承载体积 -->
          <el-form-item style="width: 32%" label="承载体积" prop="maxVolume">
            <el-input v-model="ruleForm.maxVolume">
              <template slot="append">m³</template>
            </el-input>
          </el-form-item>
          <!-- 承载上限 -->
          <el-form-item style="width: 32%" label="承载上限" prop="maxNum">
            <el-input v-model="ruleForm.maxNum">
              <template slot="append">个</template>
            </el-input>
          </el-form-item>
          <!-- 承载重量 -->
          <el-form-item style="width: 32%" label="承载重量" prop="maxWeight">
            <el-input v-model="ruleForm.maxWeight">
              <template slot="append">Kg</template>
            </el-input>
          </el-form-item>
        </div>
        <div class="item three">
          <el-form-item
            style="width: 45%"
            label="库位排/列/层"
            class="itemChildren"
          >
            <el-input v-model.number="ruleForm.locationRow" />
            <el-input v-model.number="ruleForm.locationColumn" />
            <el-input v-model.number="ruleForm.locationLayer" />
          </el-form-item>
          <el-form-item
            style="width: 55%"
            label="库位长/宽/高"
            class="itemChildren"
          >
            <el-input v-model="ruleForm.locationLength">
              <template slot="append">cm</template>
            </el-input>
            <el-input v-model="ruleForm.locationWidth">
              <template slot="append">cm</template>
            </el-input>
            <el-input v-model="ruleForm.locationHigh">
              <template slot="append">cm</template>
            </el-input>
          </el-form-item>
        </div>
        <el-form-item class="btns">
          <el-button type="primary" @click="submitForm('ruleForm')">
            提交
          </el-button>
          <!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
          <el-button @click="$router.back()">返回</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>
import { getLocationCode, getWarehouse, addLocation, editLocation, getLocationDetails } from '@/api/location'
import { getAreaById } from '@/api/location-views'
// 引入校验规则集
import rules from '../rules.js'
export default {
  data() {
    return {
      title: '新增库位',
      ruleForm: {
        areaId: '',
        warehouseId: '',
        location: [],
        code: '',
        name: '',
        status: '启用',
        temperatureType: '',
        useType: '',
        bearingType: '',
        // 排 列 层 长 宽 高
        locationRow: '',
        locationColumn: '',
        locationLayer: '',
        // 上面三个要求数字
        locationLength: '',
        locationWidth: '',
        locationHigh: '',
        maxNum: '',
        maxVolume: '',
        maxWeight: ''
      },
      value: '',
      options: [],
      rules,
      GoodsTypeList: [],
      ownerList: []
    }
  },
  async created() {
    // 路由跳转传参 获取id
    const id = this.$route.params.id
    // 获取仓库列表
    const res = (await getWarehouse()).data.data
    this.options = res.map(item => {
      return { label: item.name, value: item.id }
    })
    // 获取仓库下所有库区
    for (let i = 0; i < res.length; i++) {
      const data = (await getAreaById(res[i].id)).data.data
      const children = data.map(item => {
        return {
          label: item.name,
          value: item.id,
          temperatureType: item.temperatureType,
          bearingType: item.bearingType,
          useType: item.useType
        }
      })
      this.$set(this.options[i], 'children', children)
    }
    // 1. id是null 代表新增 发送请求获取货品编码 2. id不是null 代表编辑 发送请求数据回显
    if (id !== 'null') {
      this.title = '编辑库位'
      const result = (await getLocationDetails(id)).data.data
      console.log(result)
      for (const key in this.ruleForm) { this.ruleForm[key] = result[key] }
      this.ruleForm.status = this.ruleForm.status === 0 ? '停用' : '启用'
      this.ruleForm.location = [result.warehouseId, result.areaId]
      // 编辑设置id
      this.ruleForm.id = id
    } else {
      // 获取库位编号
      this.ruleForm.code = (await getLocationCode()).data.data
    }
  },
  methods: {
    // 级联---选择库区
    handleChange(value) {
      this.ruleForm.warehouseId = value[0]
      this.ruleForm.areaId = value[1]
      let index2
      const index1 = this.options.findIndex(item => {
        const res1 = item.value === value[0]
        item.children.forEach((v, i) => {
          v.value === value[1] ? index2 = i : ''
        })
        return res1
      })
      if (index1 !== -1) {
        this.ruleForm.temperatureType = this.options[index1].children[index2].temperatureType
        this.ruleForm.bearingType = this.options[index1].children[index2].bearingType
        this.ruleForm.useType = this.options[index1].children[index2].useType
      }
    },

    // 表单确定按钮
    async submitForm(formName) {
      await this.$refs[formName].validate()
      this.ruleForm.status = this.ruleForm.status === '启用' ? 1 : 0
      console.log(243, this.ruleForm)
      // 调用接口 发送请求 成功后提示 返回之前的路由界面
      this.title === '新增库位'
        ? await addLocation(this.ruleForm)
        : await editLocation(this.ruleForm)
      this.$message.success(this.title + '成功')
      this.$router.back()
    }
  }
}
</script>
<style scoped lang="scss">
.item {
  display: flex;
  margin: 10px 0;
  > * {
    margin: 0 10px;
  }
}

.btns {
  margin-top: 20px;
  ::v-deep .el-form-item__content {
    display: flex;
    justify-content: center;
    > * {
      margin: 0 10px;
    }
  }
}

.three {
  ::v-deep .el-form-item__content {
    display: flex;
    > * {
      margin: 0 10px 0 0;
    }
  }
}
</style>
